/*
 * 检测项关联产品标签列表
 * @Author: zfx
 * @Date: 2018-07-27 10:11:47
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .v-admin-test-product-label-index {
        .v-admin-test-product-label-h4 {
            padding: 10px 0;
        }
    }
</style>
<template>
	<div
		:style="{'max-height':formMaxHeight(true)}"
		class="v-admin-test-product-label-index">
		<div>
			<div
				v-for="(item, key) in skinDetection"
				:key="key">
				<h3 class="v-admin-test-product-label-h4">{{ `${$t('test_product_label.select_detector')}：` }}{{ item.skin_detector_remark }}</h3>
				<Table
					:columns="columns"
					:loading="Number(product_id) !== Number(item.skin_detector_id) ? false : loading"
					:data="item.skin_detector_items"
					class="personal-scrollbar"
					border/>
			</div>
		</div>
	</div>
</template>

<script>

import { Tag, Button } from 'iview';
import { computedFormMaxHeight } from 'src/views/mixins/computedFormMaxHeight';

export default {
	name: 'TestProductLabelIndex',
	mixins: [computedFormMaxHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		skinDetection: {
			type: Array,
			default() {
				return [];
			},
		},
		productTags: {
			type: Array,
			default() {
				return [];
			},
		},
		productDetail: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('test_product_label.select_skin'),
					key: 'name',
					align: 'center',
					render: (h, { row }) => <div> { row.name || '-' } </div>,
				},
				{
					title: this.$t('test_product_label.select_product_label'),
					key: 'product_tags',
					align: 'center',
					render: (h, { row }) => {
						let tags = this.$t('common.none');
						if (Array.isArray(row.product_tags) && row.product_tags.length > 0) {
							tags = row.product_tags.map(tag => <Tag type="border">{ tag.name }</Tag>);
						}
						return (<div>{ tags }</div>);
					},
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					width: 200,
					render: (h, { row }) => (
						<div>
							<Button size="small" on-click={() => { this.$emit('show', row); }} type="primary">
								{this.$t('common.edit')}
							</Button>
						</div>
					),
				},
			],
			product_id: '',
		};
	},
	watch: {
		productDetail() {
			if (this.productDetail && Object.keys(this.productDetail).length > 0) {
				this.product_id = this.productDetail.skin_detector_id;
			}
		},
	},
};
</script>
